<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>登录</title>
    <base href="/SSMSD/">
    <meta name="description" content="User login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="assets/fonts/fonts.googleapis.com.css"/>
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
</head>

<body class="login-layout light-login" style="padding: 100px">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <i class="ace-icon fa fa-leaf green"></i>
                            <span class="red">woniuxy集团旗下酒店</span>
                            <!-- <span class="white" id="id-text2">登陆&注册</span> -->
                        </h1>
                        <h4 class="blue" id="id-company-text">&copy; woniuxy</h4>
                    </div>

                    <div class="space-6"></div>

                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <i class="ace-icon fa fa-coffee green"></i> 请输入您的账户信息
                                    </h4>

                                    <div class="space-6"></div>

                                    <form action="user/login" method="post" id="loginForm">
                                        <fieldset>
                                        	<div class="form-group col-sm-12">
                                            	<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="请输入用户名"
                                                                   name="account" id="login_account"
                                                                   th:value="${account}"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                            	</label>		
                                            </div>
                                            <div class="col-sm-12" style="padding: 0px">
                                            	<div class=" col-sm-12" id="pw_div"> 
                                            	<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="password" class="form-control" placeholder="请输入密码" name="password" id="login_password"/>
														<i class="ace-icon fa fa-lock"></i>
													</span>
                                            	</label>
                                            	</div>
												<div  class="" id="but_div">
													<button type="button" class="btn btn-primary btn-sm" id="lg_code_submit" style="display: none"> 
          												<span class="glyphicon glyphicon-envelope"></span>确认发送
       												</button>
												</div>
											</div>



                                            <div class="clearfix ">
                                                <div class="text-left ">
                                                    <a th:text="${tips}" style="color: red" id="tips"></a>
                                                </div>
                                                <div class="text-right ">
                                                    <a href="javascript:void(0)" class="center text-right" id="usePhoneLogin" flag="1">使用短信验证登录</a>
                                                </div>
                                            </div>

                                            <div class="clearfix">
                                                <label class="inline ">
                                                    <input type="checkbox" class="ace" name="rememberMe"/>
                                                    <span class="lbl"> 记住</span>
                                                </label>

                                                <button type="submit"
                                                        class="width-35 pull-right btn btn-sm btn-primary">
                                                    <i class="ace-icon fa fa-key"></i>
                                                    <span class="bigger-110">登录</span>
                                                </button>
                                            </div>

                                            <div class="space-4"></div>
                                        </fieldset>
                                    </form>

                                   <!--  <div class="social-or-login center">
                                        <span class="bigger-110">没有第三方登录</span>
                                    </div>

                                    <div class="space-6"></div>

                                    <div class="social-login center">
                                        <a class="btn btn-primary" onclick="alert('网站正在接入中,暂不可使用...')">
                                            <i class="ace-icon fa fa-wechat"></i>
                                        </a>

                                        <a class="btn btn-info" onclick="alert('网站正在接入中,暂不可使用......')">
                                            <i class="ace-icon fa fa-qq"></i>
                                        </a>
                                    </div> -->
                                </div>
                                <!-- /.widget-main -->

                                <div class="toolbar clearfix">
                                    <div>
                                        <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                            <i class="ace-icon fa fa-arrow-left"></i> 忘记密码
                                        </a>
                                    </div>

                                    <div>
                                        <a href="#" data-target="#signup-box" class="user-signup-link">
                                            注册
                                            <i class="ace-icon fa fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- /.widget-body -->
                        </div>
                        <!-- /.login-box -->
                                                    <div id="forgot-box" class="forgot-box widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header red lighter bigger">
                                            <i class="ace-icon fa fa-key"></i> 找回密码
                                        </h4>

                                        <div class="space-6"></div>
                                        <p>
                                            输入您的注册账号
                                        </p>

                                        <form>
                                            <fieldset>
                                                <div class="form-group col-sm-12">
                                               		<input type="text" class="col-sm-6 " placeholder="在此输注册的账号" id="rs_account"/>
													<div class="col-sm-4 col-sm-offset-1">
														 <button type="button" class="btn btn-primary btn-sm" id="rs_code_submit">
          													<span class="glyphicon glyphicon-envelope"></span>确认发送
       													 </button>
													</div>
												</div>
												 <div class="form-group col-sm-12" >
                                               		<input type="text" class="col-sm-12 " placeholder="请输入邮箱收到的验证码" disabled="disabled" id="rs_code"/>
												</div>
												 <div class="form-group col-sm-12">
                                               		<input type="text" class="col-sm-12 " placeholder="请输入新的密码" disabled="disabled" id="rs_password"/>
												</div>
												 <div class="form-group col-sm-12 " style="color: red">
                                               		<div id="rs_info"></div>
												</div>
												 <div class="form-group col-sm-12 col-sm-offset-4">
                                               		<button type="submit" class="btn btn-primary btn-sm" disabled="disabled" id="rs_update"><span class="glyphicon glyphicon-ok"></span>确定修改</button>
												</div>
                                            </fieldset>
                                        </form>
                                    </div>
                                <!-- /.widget-main -->

                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        返回登录
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                            <!-- /.widget-body -->
                        </div>
                        <!-- /.forgot-box -->

                        <div id="signup-box" class="signup-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header green lighter bigger">
                                        <i class="ace-icon fa fa-users blue"></i> 用户注册
                                    </h4>

                                    <div class="space-6"></div>
                                    <p>填写信息: </p>

                                    <form method="post" action="register">
                                        <fieldset>

                                            <label class="block clearfix">
															<span class="block input-icon input-icon-right">
																<input type="text" class="form-control"
                                                                       placeholder="用户名" name="name" id="register_name"
                                                                       required/>
																<i class="ace-icon fa fa-user"></i>
                                <div id="loginname"></div>
															</span>

                                            </label>

                                            <label class="block clearfix">
																<span class="block input-icon input-icon-right">
																	<input type="text" class="form-control"
                                                                           placeholder="登录名(选填)" id="register_account"
                                                                           name="user.account"/>
																	<i class="ace-icon fa fa-envelope"></i>
                                  <div id="account_alert"></div>
																</span>

                                            </label>


                                            <label class="block clearfix">
															<span class="block input-icon input-icon-right">
																<input type="text" class="form-control"
                                                                       placeholder="身份证号" id="register_identify"
                                                                       name="identify" required/>
																<i class="ace-icon fa fa-pencil-square-o"></i>
                                <div id="identify_alert"></div>
															</span>

                                            </label>
                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码"
                                                                   name="user.password" id="register_password"
                                                                   required/>
															<i class="ace-icon fa fa-lock"></i>
                              <div id="password_alert"></div>
														</span>

                                            </label>

                                            <label class="block clearfix">
															<span class="block input-icon input-icon-right">
																<input type="text" class="form-control"
                                                                       placeholder="手机号" name="user.phone"
                                                                       id="phoneNumber" required/>
																<i class="ace-icon fa fa-phone"></i>
                                <div id="phone_alert"></div>
															</span>

                                            </label>
                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right">
																<button type="button"
                                                                        class="form-control btn btn-primary"
                                                                        placeholder="发送验证码" id="sendSMS">发送验证码</button>
															</span>

                                            </label>
                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right">


															<input type="text" class="form-control"
                                                                   placeholder="请输入手机接收到的手机验证码" name="phoneCode"
                                                                   id="phoneCode" required/>

															<i class="ace-icon fa fa-retweet"></i>
                              <div id="phoneCode_alert"></div>
														</span>

                                            </label>

                                            <label class="block">
                                                <input type="checkbox" class="ace" required/>
                                                <span class="lbl">
															接受
															<a href="#">用户协议</a>
														</span>
                                            </label>

                                            <div class="space-24"></div>

                                            <div class="clearfix">
                                                <button type="reset" class="width-30 pull-left btn btn-sm">
                                                    <i class="ace-icon fa fa-refresh"></i>
                                                    <span class="bigger-110">重置</span>
                                                </button>


                                                <button type="submit"
                                                        class="width-65 pull-right btn btn-sm btn-success">

                                                    <span class="bigger-110">注册</span>
                                                    <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>

                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        <i class="ace-icon fa fa-arrow-left"></i> 返回登录
                                    </a>
                                </div>
                            </div>
                            <!-- /.widget-body -->
                        </div>
                        <!-- /.signup-box -->
                    </div>
                    <!-- /.position-relative -->

                    <div class="navbar-fixed-top align-right">
                        <br/> &nbsp;
                        <a id="btn-login-dark" href="#">亮黑背景</a> &nbsp;
                        <span class="blue">/</span> &nbsp;
                        <a id="btn-login-blur" href="#">奇观异彩</a> &nbsp;
                        <span class="blue">/</span> &nbsp;
                        <a id="btn-login-light" href="#">贼拉凉</a> &nbsp; &nbsp; &nbsp;
                    </div>
                </div>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.main-content -->
</div>

<script src="assets/js/jquery.2.1.1.min.js"></script>
<script type="text/javascript">
    window.jQuery || document.write("<script src='assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function ($) {
    	//更改验证码按钮状态
    	$("#login_account").change(function(){
    		var phone= $("#login_account").val();
    		if (!checkPhone(phone)) {
                $("#tips").html("手机号格式不正确");
            } else {
                $("#tips").html("");
                $("#lg_code_submit").removeAttr("disabled");
            }
    	});
    	//发送验证码
    	$("#lg_code_submit").click(function(){
    		$.ajax({
    			url:"user/loginCode",
    			type:"post",
    			data:{
    				phone:$("#login_account").val()
    			},
    			success:function(result){
    				if(result.code!=200){
    					alert(result.massage);
    				}else{
    					$("#login_password").attr({placeholder: "请输入验证码", name: "code"}).removeAttr("disabled");
    				}
    			}
    		});
    	});
    	
    	
    	//发送验证码-找回密码
    	$("#rs_code_submit").click(function(){
    		$("#rs_info").html("");
    		var $account=$("#rs_account").val();
    		if($account==""){
    			$("#rs_info").html("账户不能为空");
    		}else{
    			$.ajax({
    				url:"user/rsByemail",
    				type:"post",
    				data:{
    					account:$account
    				},
    				success:function(result){
    					if(result.code==200){
    						$("#rs_update").removeAttr("disabled");
    						$("#rs_code").removeAttr("disabled");
    						$("#rs_password").removeAttr("disabled");
    						$("#rs_account").attr("disabled","disabled");
    					}else{
    						$("#rs_info").html(result.massage);
    					}
    				}
    			})
    		}
    	});
    	//确认修改_找回密码
    	$("#rs_update").click(function(){
    		var $account=$("#rs_account").val();
    		var $code=$("#rs_code").val();
    		var $password=$("#rs_password").val();
    		if($account==""||$code==""||$password==""){
    			$("#rs_info").html("验证码、新密码不能为空");
    		}else{
    			$.ajax({
    				url:"user/rsPassword",
    				type:"post",
    				data:{
    					account:$account,
    					code:$code,
    					password:$password
    				},
    				success:function(result){
    					$("#rs_info").html(result.massage);
    				}
    			})
    		}
    	});


        $("#submit_register").click(function () {
            let name = $("#register_name").val();
            let account = $("#register_account").val();
            let identify = $("#register_identify").val();
            let password = $("#register_password").val();
            let phone = $("#phoneNumber").val();
            let phoneCode = $("#register_phoneCode").val();
            let flag = true;
            if (account.length != 0 && account.match(new RegExp("^[1-9]"))) {
                $("#account_alert").html("请勿以数字开头！");
                flag = false;
            }

            $('body').attr('class', 'login-layout light-login');
            $('#id-company-text').attr('class', 'blue');


            if (identify.length != 18) {
                $("#identify_alert").html("请输入正确的身份证号！");
                flag = false;
            }
            if (password.length < 5) {
                $("#password_alert").html("密码长度应不小于5位！");
                flag = false;
            }
            if (phone.match(new RegExp("^[1][13579][0-9]{9}"))) {
                //donothing
            } else {
                flag = false;
                $("#phone_alert").html("手机号码格式不正确！");
            }

            if (!phoneCode.match(new RegExp("[0-9]{6}"))) {
                flag = false;
                $("#phoneCode_alert").html("手机验证码格式不正确");
            }
            return flag;

        });

        //发验证码的请求
        $("#sendSMS").click(function () {
            var phoneNumber = $("#phoneNumber").val();
            if (!phoneNumber.match(new RegExp("^[1][13579][0-9]{9}"))) {
                $("#phone_alert").html("手机号码格式不正确！");
                return false;
            }


            $.post("getSMS", {
                phone: phoneNumber
            }, function (result) {
                alert(result);

            });
        });
        //切换登录方式
        $("#usePhoneLogin").click(function () {
            if ($(this).attr("flag") == 1) {
                $("#login_account").attr({placeholder: "请输入手机号", name: "phone"});
                $("#login_password").attr({placeholder: "请输入验证码", name: "code"}).attr("disabled","disabled");
                $(this).html("使用账号登录").attr("flag", "2");
                $("#tips").html("");
                $("#but_div").addClass("col-sm-4");
                $("#pw_div").removeClass().addClass("col-sm-7");
                $("#lg_code_submit").css("display","inline").attr("disabled","disabled");
                $("#loginForm").attr("action","user/loginByPhone")
            } else {
                $("#login_account").attr({placeholder: "请输入账户", name: "account"});
                $("#login_password").attr({placeholder: "请输入密码", name: "password"}).removeAttr("disabled");
                $(this).html("使用短信验证登录").attr("flag", "1");
                $("#tips").html("");
                $("#but_div").removeClass();
                $("#pw_div").removeClass().addClass("col-sm-12");
                $("#lg_code_submit").css("display","none");
                $("#loginForm").attr("action","user/login")
            }
        });
        //登录验证
        $("#login_account").change(function () {
            var account = $("#login_account").val();
            if ($("#login_account").attr("name") == "phone") {
                if (!checkPhone(account)) {
                    $("#tips").html("手机号格式不正确");
                } else {
                    $("#tips").html("");
                }
            } else {
                if (!checkAccount(account)) {
                    $("#tips").html("账号格式不正确，请以字母开发");
                } else {
                    $("#tips").html("");
                }
            }
        });
        //提交登录表单时的校验
        $("#loginForm").submit(function () {
            var account = $("#login_account").val();
            if ($("#login_account").attr("name") == "phone") {
                return checkPhone(account);
            } else {
                return checkAccount(account);
            }
        });

        $(document).on('click', '.toolbar a[data-target]', function (e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible'); //hide others
            $(target).addClass('visible'); //show target
        });
    });


    //you don't need this, just used for changing background
    jQuery(function ($) {
        $('#btn-login-dark').on('click', function (e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function (e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function (e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

    });

    //检查手机号
    function checkPhone(phone) {
        var regexp = /^1[3456789]\d{9}$/;
        return regexp.test(phone);
    }

    //检查账号
    function checkAccount(account) {
        var regexp = /^[a-zA-Z][a-zA-Z0-9_]*$/;
        return regexp.test(account);
    }
</script>
<div style="text-align:center;">
    <p>power by:<a href="http://www.woniuxy.com/" target="_blank">woniuxy</a></p>
</div>
</body>

</html>
